<template>
	<view class="memberdetail" v-if="isShowDetail">
		<view class="detail_header">
			<view class="detail_left">
				<view class="detatil_img">
					<image :src="memberDetail.head_img"  mode="scaleToFill" @error="imageError" @click.stop="preHeadImg(memberDetail.head_img)"></image>
				</view>
				<view class="detail_member">
					<view class="detail_top">
						<text>{{memberDetail.idCardName?memberDetail.idCardName:""}}</text>
						<text class="type_name">({{memberDetail.type_name}})</text>
					</view>
					<view class="detail_bot">
						<text class="sex">{{memberDetail.gender}}</text>
					</view>
				</view>
			</view>
			<view class="detail_status">
				<text>已审核</text>
			</view>
		</view>
		
		<view class="detail_content">
			<view class="cell">
				<view class="cell_lt">
					出身日期
				</view>
				<view class="cell_rt">
					{{memberDetail.birth?memberDetail.birth:""}}
				</view>
			</view>
			<view class="cell">
				<view class="cell_lt">
					证件类型
				</view>
				<view class="cell_rt">
					<text v-if="memberDetail.cardType==1">身份证</text>
					<text v-if="memberDetail.cardType==2">护照 </text>
					<text v-if="memberDetail.cardType==4">台胞证</text>
					<text v-if="memberDetail.cardType==8">港澳通行证</text>
				</view>
			</view>
			<view class="cell">
				<view class="cell_lt">
					证件号码
				</view>
				<view class="cell_rt">
					{{memberDetail.idCard?memberDetail.idCard:""}}
				</view>
			</view>
			<view class="cell">
				<view class="cell_lt">
					隶属机构
				</view>
				<view class="cell_rt">
					{{memberDetail.org_name?memberDetail.org_name:""}}
				</view>
			</view>
			<view class="cell">
				<view class="cell_lt">
					证书编号
				</view>
				<view class="cell_rt">
					{{memberDetail.book_no?memberDetail.book_no:""}}
				</view>
			</view>
			<view class="cell">
				<view class="cell_lt">
					身份、证书图片
				</view>
				<view class="cell_check" @click="toBook_img">
					<text>点击查看</text><text class="ms-right msfont"></text>
				</view>
			</view>
		</view>
		
		<view class="detail_footer" v-if="orgSignUp.length>0">
			<view class="title">
				棋手生涯
			</view>
			<view class="footer_content">
				
				<view class="div-bg bg-white">
				   <!--物流跟踪-->
				   <view style="padding-bottom: 0.5rem;">
				     <view class="bg-white">
				       <view>
				         <view class="track-rcol">
				           <view class="track-list">
				             <ul>
				             <view>
				               <li  class="finall'" v-for='(item,index) in orgSignUp' :key='index'>
				                 <view class="node-icon"></view>
													<view :class="(index==orgSignUp.length-1)?'progress no_border':'progress'"></view>
													<view class="check_status">
														<view class="check_title" >
															{{item.titles}}
														</view>
														<view class="check_step">
															{{item.orgName}}
														</view>
														<view class="check_date">
															{{item.signTime}}
														</view>
													</view>
				               </li>
				             </view>
				             </ul>
				           </view>
				         </view>
				       </view>	
				     </view>
				   </view>
				 </view>
				 
			</view>
		</view>
	</view>
</template>

<script>
	import {memDetail,memCareer} from "@/common/api.js"
	export default{
		data(){
			return{
				id:"",
				orgSignUp:[],
				memberDetail:{},
				isShowDetail:false,
				isPreHeadImg:false,  //是否预览头像
			}
		},
		onLoad(e){
			var _this=this;
			_this.id=e.id;
			_this.getMemberDetail();
			_this.getMemberCareer();
			uni.showLoading({
				title:"加载中..."
			})
			setTimeout(function(){
				_this.isShowDetail=true;
				uni.hideLoading()
			},1000)
		},
		methods:{
			getMemberDetail(){
				var _this=this,data={
					id:_this.id
				};
				memDetail(data).then(function(res){
					var e=res.data;
					if(e.errcode==0){
							_this.memberDetail=e.data.p_info;
							_this.memberDetail['gender']=_this.memberDetail['sex']==0?"男":"女"
							var birthDay=_this.memberDetail["birthday"];
							_this.memberDetail['birth']=birthDay!=null?birthDay.slice(0,4)+"年"+birthDay.slice(4,6)+"月"+birthDay.slice(6,8)+"日":"";
							_this.memberDetail['head_img']=_this.memberDetail["idcard_img"]!=null&&_this.memberDetail["idcard_img"]!=""?"https:"+_this.$store.state.baseImgURL+_this.memberDetail["idcard_img"]:"https:"+_this.$store.state.baseImgURL+"img/cert/demo.png"
							_this.isPreHeadImg=_this.memberDetail["idcard_img"]!=null&&_this.memberDetail["idcard_img"]!=""?true:false
						}else if(e.errcode==1000||e.errcode==1001){
							uni.removeStorageSync('token');
							uni.reLaunch({
								url:'/pages/home/welcome'
							})
					}else{
						uni.showToast({
							position: 'center',
							icon: 'none',
							title:e.msg
						});
					}
				})
			},
			preHeadImg(imgSrc){
				var _this=this,imgList=[];
				if(imgSrc!=null&&imgSrc!=""&&_this.isPreHeadImg){
					imgList.push(imgSrc)
					uni.previewImage({
						current:imgSrc,
						urls:imgList
					})
				}
			},
			//会员生涯
			getMemberCareer(){
				var _this=this,data={
					id:_this.id
				};
				memCareer(data).then(function(res){
					var e=res.data;
					e.map(function(item,index){
						if(item.type=='1'){
							item.titles="在"+item.org_name+"注册，注册等级为"+item.level;
							item.orgName="注册机构："+item.org_name
							item.signTime=item.time?"注册时间："+item.time.slice(0,4)+"年"+item.time.slice(5,7)+"月"+item.time.slice(8,10)+"日":""
						}else if(item.type=='2'){
							item.titles="在"+item.title+"中，被授予"+item.level+"称号";
							item.orgName="承办机构："+item.org_name;
							item.signTime=item.time?"发证时间："+item.time.slice(0,4)+"年"+item.time.slice(5,7)+"月"+item.time.slice(8,10)+"日":""
						}else if(item.type=='3'){
							item.titles="从"+item.out_org_name+"转出";
							item.orgName="转入机构："+item.in_org_name;
							item.signTime=item.time?"转会时间："+item.time.slice(0,4)+"年"+item.time.slice(5,7)+"月"+item.time.slice(8,10)+"日":""
						}
					})
					_this.orgSignUp=e;
				})
			},
			imageError() {
				this.memberDetail["head_img"]="https:"+this.$store.state.baseImgURL+"img/cert/demo.png"
			},
			//查看证书图片
			toBook_img(){
				var _this=this;
				uni.navigateTo({
					url:"/pages/memberManagement/memberBookImg?id="+_this.id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.memberdetail{
		
	}
	.detail_header{
		margin: 24rpx 0;
		padding: 18rpx 0;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.detail_member{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.detail_top{
			margin-top: 30rpx;
		}
		.detail_bot{
			margin-bottom: 40rpx;
		}
		.detail_left{
			display: flex;
			flex-direction: row;
			font-size: 32rpx;
		}
		.detatil_img{
			margin-left: 42rpx;
			image{
				width: 130rpx;
				height: 182rpx;
			}
			margin-right: 42rpx;
		}
		.detail_name{
			
		}
		.sex{
			margin-right: 12rpx;
		}
	}
	.detail_content{
		background: #fff;
		padding: 0 32rpx;
		.cell{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 2rpx solid #F1F1F2;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #8E8E93;
		}
		.cell_check{
			color: #1A66FF;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: -6rpx;
		}
	}
	.detail_footer{
		margin-top: 24rpx;
		background: #fff;
		padding: 24rpx 24rpx 0 24rpx;
		.title{
			font-size: 32rpx;
		}
	}
	.detail_status{
		width: 138rpx;
		height: 56rpx;
		background:rgba(26,102,255,1);
		line-height: 56rpx;
		text-align: center;
		margin-top: 32rpx;
		color: #fff;
		opacity:1;
		border-radius:34rpx 0rpx 0rpx 34rpx;
	}
	.type_name{
		margin-left: 10rpx;
	}
	//审核进度
	.bg-white{
		margin: auto;
		// padding-left: 12rpx;
		padding-right: 24rpx;
		font-size: 28rpx;
		background: #fff;
		margin-left: 6rpx;
	}
	.check_status{
		font-size: 28rpx;
		.check_title{
			font-size: 32rpx;
			color: #000;
			padding-top: 0;
		}
		.check_step{
			margin-top: 16rpx;
		}
		.check_date{
			margin-top: 16rpx;
			padding-bottom: 24rpx;
		}
	}
	.progress{
		width: 2rpx;
		background: #2D8DFF;
		height: 100%;
		position: absolute;
		top: 16rpx;
		left: 0;
		margin-left: -2.8rpx;
	}
	.no_border{
		width: 0;
		display: none;
	}
	.message-text{
	    font-family: MicrosoftYaHei;
	    font-size: 1rem;
	    font-weight: normal;
	    font-stretch: normal;
	    line-height: 3rem;
	    letter-spacing: 0rem;
	    color: #333333;
	    width: 50%;
	  }
	  .fontblack{
	    color:#999999
	  }
	  .img2{
	    width: .81rem;
	    height: .8rem;
	    float: right;
	  }
	  .addressshow2{
	    height: auto;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    width: 75%;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    white-space: normal;
	    word-wrap: break-word;
	    word-break: break-all;
	    font-size: 1rem;
	  }
	  .addressshow1{
	    height: auto;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    width: 75%;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	    white-space: normal;
	    word-wrap: break-word;
	    word-break: break-all;
	    font-size: 1rem;
	  }
	  .orderTitle{
	    font-size: 1rem;
	    color: #333333;
	    height: auto;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    white-space: normal;
	    word-wrap: break-word;
	    word-break: break-all;
	    height: 2.5rem;
	  }
	  .orderDetail{
	    font-size: 0.8rem;
	    color: #666666;
	    text-align:left;
	  }
	  .border-ceter{
	    width: 92%;
	    // padding: 0 16rpx;
			background: #fff;
	  }
	  .pay-button{
	    width: 88%;
	    height: 2.6rem;
	    position:relative;
	    background-color: red;
	    color: white;
	
	    margin-left: 6%;
	  }
	  ul li{
	    list-style:none;
	    font-size:1rem;
	  }
	  ul {
	    padding-left: 0;
	  }
	  .track-rcol{}
	  .track-list{
	    position:relative;
	  }
	  .track-list li{
	    position:relative;
			padding-left: 40rpx;
	    color: #999;
	  }
	  .track-list li.first{
	    color:red;
	    padding-top:0;
	    width:100%;
	    text-align:left;
	    // border-left:1rpx solid #2D8DFF;
	  }
	  .track-list li .node-icon{
	    position: absolute;
	    left: -11rpx;
	    border-radius: 0.25rem;
	    width: 16rpx;
	    height: 16rpx;
	    top:14rpx;
	    background-color: #2D8DFF;
	  }
	  .track-list li.first .node-icon{
	    background-position:0-72rpx;
	    background-color: #2D8DFF;
	    width: 16rpx;
	    z-index: 2;
	    height: 16rpx;
	    position: absolute;
	    // left: -9rpx;
	    top: 14rpx;
	    border-radius: 0.5rem;
	  }
	  .track-list li .time{
	    margin-right:40rpx;
	    position:relative;
	    top:8rpx;
	    display:inline-block;
	    vertical-align:middle;
	    background-color: white;
	    color: #999;
	    width:100%;
	    text-align:left;
	  }
	  .track-list li .txt{
	    position:relative;
	    display:inline-block;
	    vertical-align:top;
	    color: #999;
	  }
	  .track-list li.first .time{
	    text-align: left;
	    width: 94%;
	    color:red;
	  }
	  .track-list li.first .txt{
	    color: red;
	    text-align:left;
	    width: 94%;
	  }
	  .track-list li.finall{
	    position:relative;
	    // padding:0rpx 0 1.5rem 25rpx;
	    line-height:36rpx;
	    // border-color :white;
	    // border-left:1rpx solid #ffffff;
	    color: #999;
	  }
</style>
